<!--  -->
<template>
  <div >
    <div class="flex-box">
      <a-carousel autoplay style="width:64%">
        <div><img class="img-list" src="./img/one.png" /></div>
        <div><img class="img-list" src="./img/two.png" /></div>
        <div><img class="img-list" src="./img/three.png" /></div>
      </a-carousel>
      <score-form />
    </div>
    <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
      <a-list-item slot="renderItem" :key="item.title" slot-scope="item, index">
        <img height="140" slot="extra" width="272" alt="logo" :src="'http://127.0.0.1:8080' + item.pic" />
        <a-list-item-meta :description="item.time">
          <a slot="title" :href="item.net">{{ item.title }}</a>
        </a-list-item-meta>
        {{ item.jianjie }}
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import { list } from '@/api/news/news'
import ScoreForm from './form/ScoreForm.vue'
export default {
  components: { ScoreForm },
  data() {
    return {
      listData: [],
      pagination: {
        onChange: page => {
          this.query.pageNum = page
          this.fetch(this.query)
        },
        pageSize: 5,
        total: 0
      },
      // titleName: "",
      query: {
        title: '',
        pageNum: 1,
        pageSize: 5
      }
    }
  },
  mounted() {
    this.fetch(this.query)
  },
  methods: {
    fetch(param) {
      list(param).then(res => {
        this.listData = res.rows
        this.pagination.total = res.total
      })
    },
    search() {
      this.fetch(this.query)
    }
  }
}
</script>

<style scoped>
.flex-box {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.img-list {
  height: 400px;
}
.ant-carousel >>> .slick-slide {
  text-align: center;
  /* background: #364d79; */
  overflow: hidden;
  width: 200px;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}

.box {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.autoMid {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>
